import React from 'react';
var NavLink = require('./NavLink')
class Toplist extends React.Component{
	
    render(){
    	var arr=[];
    	var dd={};

		$.ajax({
			url: 'http://10.31.160.51/react/data.php',
			type: 'get',
			async:false,
			dataType: 'json',
			success:function(data){
				console.log(data)
				dd = data;
			}
		})
		$(function(){ 
            var item = $("tr"); 
            for(var i=0;i<item.length;i++){ 
                if(i%2==0){ 
                    item[i].style.backgroundColor="#dddddd"; 
                } 
            } 
  
        });
		for(var i=0;i<dd[1].length;i++){
    		arr.push(<tr><td className="data-one"><a href="##">{i+1}</a></td><td className="data-two"><NavLink to={dd[1][i].url}>{dd[1][i].name}</NavLink></td><td className="data-three"><a href="##">{dd[1][i].time}</a></td><td className="data-four"><a href="##">{dd[1][i].geshou}</a></td></tr>)
    	};
		
		
        return(
        <div className='clearfix'>
            
           <div id="toplist" className="clearfix">
			<div className="toplist-left clearfix">
				<div className="left-top">
					<h2>云音乐特色榜</h2>
					<ul>
						<li className="item-left clearfix">
							<span className="msk"><img src="http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40"/></span>
							<a href="##" className="item-left-top">云音乐飙升榜</a>
							<p className="item-left-bot">每日更新</p>
						</li>
						<li className="item-left clearfix">
							<span className="msk"><img src="http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40"/></span>
							<a href="##" className="item-left-top">云音乐飙升榜</a>
							<p className="item-left-bot">每日更新</p>
						</li>
						<li className="item-left clearfix">
							<span className="msk"><img src="http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40"/></span>
							<a href="##" className="item-left-top">云音乐飙升榜</a>
							<p className="item-left-bot">每日更新</p>
						</li>
						<li className="item-left clearfix">
							<span className="msk"><img src="http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40"/></span>
							<a href="##" className="item-left-top">云音乐飙升榜</a>
							<p className="item-left-bot">每日更新</p>
						</li>
					</ul>
				</div>
				<div className="left-bot">
					<h2>云音乐特色榜</h2>
					<ul>
						<li className="item-left clearfix">
							<span className="msk"><img src="http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40"/></span>
							<a href="##" className="item-left-top">云音乐飙升榜</a>
							<p className="item-left-bot">每日更新</p>
						</li>
						<li className="item-left clearfix">
							<span className="msk"><img src="http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40"/></span>
							<a href="##" className="item-left-top">云音乐飙升榜</a>
							<p className="item-left-bot">每日更新</p>
						</li>
						<li className="item-left clearfix">
							<span className="msk"><img src="http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40"/></span>
							<a href="##" className="item-left-top">云音乐飙升榜</a>
							<p className="item-left-bot">每日更新</p>
						</li>
						<li className="item-left clearfix">
							<span className="msk"><img src="http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40"/></span>
							<a href="##" className="item-left-top">云音乐飙升榜</a>
							<p className="item-left-bot">每日更新</p>
						</li>
					</ul>
				</div>
			</div>
			<div className="toplist-right g-mn3  clearfix">
				<div className="right-top clearfix">
					<div className="cnt clearfix">
						<div className="cnt-left clearfix">
							<img src="http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=150y150"/>
						</div>
						<div className="cnt-right clearfix">
							<h2>云音乐飙升榜</h2>
							<div className="cnt-right-top">
								<i></i>
								<span className="sep-1">最近更新：06月26日</span>
								<span className="sep-2">（每天更新）</span>
							</div>
							<div className="cnt-right-bot clearfix">
								<a href="##" className="btn-1">播放</a>
								<a href="##" className="btn-2"></a>
								<a href="##" className="btn-3 clearfix">447754<i></i></a>
								<a href="##" className="btn-4">(1817)<i></i></a>
								<a href="##" className="btn-5">下载<i></i></a>
								<a href="##" className="btn-6">65441<i></i></a>
								
							</div>
						</div>
					</div>
					
				</div>
				<div className="right-bot clearfix">
					<div className="right-bot-top clearfix">
						<h2>歌曲列表</h2>
						<p>100首歌</p>
						<span>播放：375256320次</span>
					</div>
					<div className="right-bot-bot clearfix">
						<table border="0" cellspacing="" cellpadding="">
							<tr className="tr-one">
								<th className="th-one"></th>
								<th className="th-two">标题</th>
								<th className="th-three">时长</th>
								<th className="th-four">歌手</th>
							</tr>
							{arr}
		
						</table>
					</div>
				</div>
			</div>
		</div>
        </div>
        
        )
    }
}

module.exports= Toplist;